<!DOCTYPE html>
<html lang="en">
<head>
    <base id="base" href="${rc.contextPath}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>搜索分析- 关键词分析</title>
    <meta name="description" content="overview &amp; stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <link rel="stylesheet"  href="${rc.contextPath}/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />
    <link rel="stylesheet"  href="${rc.contextPath}/stylesheets/daterangepicker.css">
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/loading.css" />
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/tips.css"/>

</head>
<style>
    tr,th{text-align: center;}
    #catetable {
        margin-bottom: 10px;
    }
    #catetable td {
        font-color:#393939;
    }
    a:hover{color:blue;text-decoration: none;}
    .stat.stat-important:after {bottom: -27px !important;}
    .ui-fa-div, .ui-mi-div, .ui-wo-div {
        text-decoration: underline;
    }
</style>
<body class="no-skin" style="background-color: #FFF;">
<#if flag??>
    <#if flag =='1'>
    <ul class="pager">
        <li class="previous">
            <a href="javascript:;" onclick="history.go(-1)">← 返回</a>
        </li>
    </ul>
    </#if>
    <#if flag =='2'>
        <ul class="pager">
            <li class="previous">
                <a href="javascript:;" onclick="backToOverview(${overviewDay!''})">← 返回</a>
            </li>
        </ul>
    </#if>
</#if>
 <div class="tabbable">
	<div class="tab-content">
		<div id="manage" class="tab-pane active in">
			<div class="row">
				<div class="col-xs-12">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="widget-box">
                                <div class="widget-header widget-header-small">
                                    <h4 class="widget-title">各品类评价详情
                                    </h4>
                                </div>
                                <div class="widget-body" style="background-color: #EFF3F8;">
                                        <div class="widget-main">
                                            <form class="form-inline" id="searchForm" method="post" action="#">
                                            <div class="form-group">
                                                <label><span style="font-weight: bold;">选择时段</span>
                                                    <input type="text" style="height: 30px; width: 180px;" id="config-demo2" name="chooseTime" value="${choose_date!''}" class="form-control time" >
                                                    <button  type="button" id="timebtn1"  onclick="replaceDate(this,'1');changeLabel(this);" class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                        昨日
                                                    </button>
                                                    <button  type="button" id="timebtn2" onclick="replaceDate(this,'7');changeLabel(this);" class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                        过去7天
                                                    </button>
                                                    <button  type="button" id="timebtn3" onclick="replaceDate(this,'31');changeLabel(this);" class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                        过去31天
                                                    </button>
                                                </label>

                                                <button id="categorySearch" type="button" class="btn btn-pink btn-sm"  style="margin-left: 50px;">
                                                    <span class="ace-icon fa fa-search icon-on-right bigger-110"></span> Search
                                                </button>
                                                <input type="text" id="categoryId" hidden="true" />
                                                <input type="text" id="sentiment" hidden="true" />
                                                <input type="text" id="tags" hidden="true" />

                                                <input type="text" id="catetime" hidden="true" value="${catetime!''}" />
                                                <input type="text" id="timeLabel" hidden="true" value="${timeLabel!''}" />

                                                <input type="text" id="pcategoryId" hidden="true" value="${pcategoryId!''}" />
                                                <input type="text" id="psentiment" hidden="true" value="${psentiment!''}" />
                                                <input type="text" id="ptags" hidden="true" value="${ptags!''}" />
                                                <input type="text" id="pcategoryName" hidden="true" value="${pcategoryName!''}" />
                                                <input type="text" id="overviewDay" hidden="true" value="${overviewDay!''}" />
                                                <input type="text" id="ocategoryName" hidden="true" value="${ocategoryName!''}" />
                                                <input type="text" id="ocategoryId" hidden="true" value="${ocategoryId!''}" />
                                                <input type="text" id="isocategory" hidden="true" value="${isocategory!'0'}" /><!--表格是否只显示一列-->
                                                <input type="text" id="isbackbtn" hidden="true" value="${isbackbtn!'0'}" /><!--页面是否显示返回按钮-->
                                                <input type="text" hidden="true" id="_csrf" name="${_csrf.parameterName}" value="${_csrf.token}" />
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="color:#de6a57;height:30px;padding-top: 5px;">*注：红色代表差评率高于10%</div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="widget-box transparent">
                                <div>
                                    <div class="widget-main no-padding" id="keywordtab" style="height: 110px;">
                                        <table class="dataTable table table-bordered table-striped" id="catetable">
                                            <thead class="thin-border-bottom">
                                                <tr>
                                                    <th>品类<input type="text" hidden="true" id="categorySortNode"> </th>
                                                    <th id="commentCount" class="sorting" onclick="changeCategoryFlag(this)">评价总量</th>
                                                    <th id="favorRate" class="sorting" onclick="changeCategoryFlag(this)">好评率%</th>
                                                    <th id="favorCount" class="sorting" onclick="changeCategoryFlag(this)">好评量</th>
                                                    <th id="middleRate" class="sorting" onclick="changeCategoryFlag(this)">中评率%</th>
                                                    <th id="middleCount" class="sorting" onclick="changeCategoryFlag(this)">中评量</th>
                                                    <th id="worstRate" class="sorting" onclick="changeCategoryFlag(this)">差评率%</th>
                                                    <th id="worstCount" class="sorting" onclick="changeCategoryFlag(this)">差评量</th>
                                                </tr>
                                            </thead>
                                            <tbody class="pointTabForKey">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="wordsrankingDiv" style="display: none;">
                        <div class="col-sm-6" id="wordsrankingCol">
                            <div class="widget-box">
                                <div class="widget-header widget-header-small">
                                    <h4 style="color:#000;"><span id="keyWordName2"></span>
                                        <label class="help_img">
                                            <i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
                                            <span class='tips'>某一品类评价词汇出现频率的排名情况</span>
                                        </label>
                                    </h4>
                                </div>
                                <div class="widget-body">
                                    <div id="wordsranking"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6"  style="padding-left: 0px!important;" id="prodtableDiv">
                            <div class="widget-box">
                                <div class="widget-header widget-header-small">
                                    <h4 style="color:#000;"><span id="keyWordName3"> <span style="color:#039183"></span> 产品排行</span>
                                        <label class="help_img">
                                            <i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
                                            <span class='tips'>某一评价词汇的产品分布情况</span>
                                        </label>
                                    </h4>
                                </div>
                                <div class="widget-body" style="word-break:break-all; word-wrap:break-all;">
                                    <table class="dataTable table table-bordered table-striped" id="prodtable">
                                        <thead class="thin-border-bottom">
                                            <tr>
                                                <th width="76%">产品名称</th>
                                                <th width="16%" class="sorting_desc" onclick="changeFlag(this)">提取词数量
                                                    <input type="hidden" value="${flag?default('2')}" id="flag"/>
                                                </th>
                                                <th width="8%">查看</th>
                                            </tr>
                                        </thead>
                                        <tbody class="pointTabForKey">
                                        </tbody>
                                    </table>
                                    <!-- 分页 -->
                                    <div class="ui-jqgrid">
                                        <div id="grid-pager"
                                             class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
                                             dir="ltr">
                                            <div id="pg_grid-pager" class="ui-pager-control" role="group">
                                                <input type="text" id="currentPage" hidden="true" value=1>
                                                <input type="text" id="pageSize" value =10 hidden="true">
                                                <input type="text" id="pageTotal" hidden="true">
                                                <table class="ui-pg-table" style="width: 100%; table-layout: fixed; height: 100%;"role="row">
                                                    <tbody>
                                                    <tr>
                                                        <td id="grid-pager_left" align="left"></td>
                                                        <td id="grid-pager_center" align="center" style="white-space: pre; width: 343px;"><table cellspacing="0" cellpadding="0" border="0" style="table-layout: auto;" class="ui-pg-table"><tbody><tr>
                                                            <td id="first_grid-pager" onclick="showPage('firstPage')"
                                                            class="ui-pg-button ui-corner-all" style="cursor: pointer;"><span
                                                                class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
                                                            <td id="prev_grid-pager" onclick="showPage('prePage')"
                                                            class="ui-pg-button ui-corner-all" style="cursor: pointer;"><span
                                                                class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
                                                            <td dir="ltr">Page <input class="ui-pg-input" id="page_num"
                                                                                      type="text" size="2" maxlength="7" disabled="true" value="${productRankPage.pageNum}" role="textbox"> of <span
                                                                    id="sp_1_grid-pager">${productRankPage.pages}</span></td>
                                                            <td id="next_grid-pager" onclick="showPage('nextPage')"
                                                            class="ui-pg-button ui-corner-all" style="cursor: pointer;"><span
                                                                class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
                                                            <td id="last_grid-pager" onclick="showPage('lastPage')"
                                                            class="ui-pg-button ui-corner-all" style="cursor: pointer;"><span
                                                                class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
                                                        </tr></tbody></table></td>
                                                        <td id="grid-pager_right" align="right">
                                                            <div dir="ltr" style="text-align: right" class="ui-paging-info">View
                                                                <span id="view_start_row"></span> - <span id="view_end_row"></span>
                                                                of <span id="view_page_total"></span>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 分页结束 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${rc.contextPath}/assets/js/jquery-2.1.4.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
<script src="${rc.contextPath}/assets/js/user/base.js"></script>
<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/loading.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/dateRange.js"></script>
<script src="${rc.contextPath}/assets/js/d3.v3.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/g2.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/g2-modal.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/slider.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/FileSaver.js"></script>		
<script type="text/javascript" src="${rc.contextPath}/javascripts/export-csv.js"></script>
<script type="text/javascript">

    var overviewDays = $("#overviewDay").val();
    d3.select(self.frameElement).style("height", "1400px");

    $(document).ready(function () {
        $("#categorySearch").click();
    });

    $("#categorySearch").on("click", function(){
        // 默认按照差评率倒叙显示
        searchCategoryRank("1", "worstRate");
    });

    $("#config-demo2").change(function(){
        $("#timeLabel").val("");
        $("#catetime").val($("#config-demo2").val());
    });

    function changeLabel(obj) {
        $("#timeLabel").val($(obj).attr("id"));
        $("#catetime").val($("#config-demo2").val());
    }

    // 返回点评概览
    function backToOverview (overviewDay) {
        $("#flag").val("2");
        window.location.href = "${rc.contextPath}/comment/overview?days=" + overviewDay;
    }

    var worstCategory = null;
    function searchCategoryRank(sort, id) {
        $("#catetable tbody").empty();

        clickTimeLabel();
        var queryDate = {};
        queryDate[$("#_csrf").attr("name")] = $("#_csrf").val();
        var catetime = $("#catetime").val();

        if(!isNull(catetime)) {
            $("#config-demo2").val(catetime);
            $("#" + $(".btn.btn-white.btn-sm.btn-info").attr("id")).removeClass("btn-info");
            var newLabel = $("#timeLabel").val();
            $("#" + newLabel).addClass("btn-info");
            queryDate["chooseTime"] = catetime;
        } else {
            queryDate["chooseTime"] = $("#config-demo2").val();
        }
        queryDate["sortColumn"] = id;
        queryDate["sortType"] = sort;
        queryDate["overviewDay"] = $("#overviewDay").val();
        if(!isNull($("#ocategoryId").val()) && !isNull($("#isocategory").val()) && $("#isocategory").val() == "1") {
            queryDate["categoryId"] = $("#ocategoryId").val();
        }
        $.ajax({
            url: "${rc.contextPath}/category/getCategoryRank",
            data: queryDate,
            type: "POST",
            dataType: "json",
            beforeSend: function () {
                $("#keywordtab").css('height', '110px');
                $("#categorySearch").attr("disabled", true);
                openPartialLayer($("#keywordtab"));
                $("#wordsrankingDiv").hide();
            },
            success: function (data) {
                var html = "";
                if (data != "" && data != null && null != data.categoryRank && data.categoryRank.length > 0) {
                    $("#keywordtab").css('height', '');
                    worstCategory = data.worstRateCategory;
                    $("#wordsrankingDiv").show();
                    $.each(data.categoryRank, function (index, item) {
                        var favorRate = (item.favorRate * 100).toFixed(2);
                        var middleRate = (item.middleRate * 100).toFixed(2);
                        var worstRate = (item.worstRate * 100).toFixed(2);

                        html += "<tr onclick=\"showDetail('" + item.categoryName +"', this)\">" +
                            "<td>" + item.categoryName + "</td>" +
                            "<td>" + item.commentCount + "</td>" +
                            "<td><div class=\"ui-fa-div\" style=\"cursor: pointer\" " +
                            "onclick=\"$(this).css('cursor', 'wait');setTimeout(function () {setCommentRankPre('" +
                            item.categoryName + "',"
                            + item.categoryId + ",'2', 1);}, 500);\">" + favorRate + "%</div></td>" +
                            "<td>" + item.favorCount + "</td><td><div class=\"ui-mi-div\" style=\"cursor: pointer\" onclick=\"$(this).css('cursor', 'wait');setTimeout(function () {setCommentRankPre('"
                            + item.categoryName + "'," + item.categoryId + ",'1', 1);}, 500);\">" + middleRate + "%</div></td>" +
                            "<td>" + item.middleCount + "</td><td><div";

                        if(worstRate > 10) {
                            html += " style=\"background-color: #de6a57;width: 100%;height: 22px;color: #fff; cursor: pointer;\"";
                        }
                        html += " class=\"ui-wo-div\" style=\"cursor: pointer\" " +
                            "onclick=\"$(this).css('cursor', 'wait');setTimeout(function () {setCommentRankPre('" +
                            item.categoryName + "'," + item.categoryId + ",'0', 1);}, 500);\">" + worstRate + "%</div>" +
                            "<td>" + item.worstCount + "</td>" +
                            "</tr>";
                    });

                    var pcategoryId = $("#pcategoryId").val();
                    var psentiment = $("#psentiment").val();
                    var pcategoryName = $("#pcategoryName").val();

                    // 点评概览返回
                    if(!isNull($("#ocategoryName").val())) {
                        var tag = setCommentRank($("#ocategoryName").val(), $("#ocategoryId").val(), "0");
                        $("#ptags").val(tag);
                        $("#flag").val("2");
                        changeChart3Title($("#ocategoryName").val(), " " + tag);
                        setProductRank($("#currentPage").val(), $("#pageSize").val(), $("#ocategoryId").val(), "0", tag, "1");
                        $("#ocategoryName").val("");
                    } else {
                        // 查看产品返回
                        if(!isNull(pcategoryId) && !isNull(psentiment) && !isNull(pcategoryName)) {
                            setCommentRank(pcategoryName, pcategoryId, psentiment);
                            if(isNull($("#ptags").val())) {
                                changeChart3Title(pcategoryName, " " + $("#tags").val());
                                setProductRank($("#currentPage").val(), $("#pageSize").val(), pcategoryId, psentiment, $("#tags").val(), "1");
                            } else {
                                changeChart3Title(pcategoryName, " " + $("#ptags").val());
                                setProductRank($("#currentPage").val(), $("#pageSize").val(), pcategoryId, psentiment, $("#ptags").val(), "1");
                            }
                        } else {
                            // 默认显示差评率最高的品类信息
                            setCommentRank(worstCategory.categoryName, worstCategory.categoryId, '0');
                            changeChart3Title(worstCategory.categoryName, " " + $("#tags").val());
                            setProductRank(1, $("#pageSize").val(), worstCategory.categoryId, worstCategory.sentiment, $("#tags").val(), "1");
                        }
                    }
                } else {
                    $("#keywordtab").css('height', '110px');
                    html = '<tr><td colspan="8"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>';
                }
                $("#catetable tbody").html(html);
                // 更改时间标签样式
                changeTimeLabelCss();
            },
            complete: function () {
                $("#categorySearch").attr("disabled", false);
                removeLoading($("#keywordtab"));
            },
            error: function (XMLHttpRequest) {
                console.log(XMLHttpRequest);
            }
        });
    }

    // 更改时间控件样式
    function changeTimeLabelCss () {
        var overviewDay = $("#overviewDay").val();
        var selectedDate = $(".btn.btn-white.btn-sm.btn-info").attr("id");
        if(isNull(overviewDay)) {
            return;
        }
        if(overviewDay == 365) {
            $("#" + selectedDate).removeClass("btn-info");
            $("#chooseTime").val("");
        }
        if(overviewDay == 15) {
            $("#" + selectedDate).removeClass("btn-info");
        }
        $("#overviewDay").val("");
    }

    function clickTimeLabel() {
        var overviewDay = $("#overviewDay").val();
        if (!isNull(overviewDay)) {
            if (overviewDay == 1) {
                $("#timebtn1").click();
            } else if (overviewDay == 7) {
                $("#timebtn2").click();
            } else if (overviewDay == 31 || overviewDay == 30) {
                $("#timebtn3").click();
            } else if(overviewDay == 15) {
                var startDate = new Date(new Date().getTime() - 15 * 1000 * 60 * 60 * 24);
                var endDate = new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24);
                var dateStr = dateFormat(startDate) + " - " + dateFormat(endDate);
                $("#config-demo2").val(dateStr);
            } else if(overviewDay == 365) {
                var startDate = new Date(new Date().getTime() - 365 * 1000 * 60 * 60 * 24);
                var endDate = new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24);
                var dateStr = dateFormat(startDate) + " - " + dateFormat(endDate);
                $("#config-demo2").val(dateStr);
            }
        }
    }

    function isNull(str) {
        if(null == str || "" == str) {
            return true;
        }
        return false
    }

    // 品类评价表 详情排序
    function changeCategoryFlag(obj) {
        var sort = $(obj).attr("class");
        var id = $(obj).attr("id");

        var node = $("#categorySortNode").val();
        if(null != node && node != "" && node!= id) {
            $("#" + node).attr("class", "sorting");
        }

        if (sort == "sorting" || sort == "sorting_asc") {
            $("#" + id).attr("class", "sorting_desc");
            searchCategoryRank(1, id);
        } else if (sort == "sorting_desc") {
            $("#" + id).attr("class", "sorting_asc");
            searchCategoryRank(2, id);
        }

        $("#categorySortNode").val(id);
    }

    function changeChart2Title(title, type) {
        $("#keyWordName2").empty();
        if (null != type && type == "2") {
            $("#keyWordName2").html(title + " 好评榜");
        } else if (null != type && type == "1") {
            $("#keyWordName2").html(title + " 中评榜");
        } else if (null != type && type == "0") {
            $("#keyWordName2").html(title + " 差评榜");
        }
    }

    function changeChart3Title(title, comment) {
        $("#keyWordName3").empty();
        $("#keyWordName3").html(title + "<span style=\"color:#039183\">" + " " + comment + "</span> 产品排行");
    }

    function setCommentRankPre(title, categoryId, type) {

        openPartialLayer($("#wordsrankingCol"));
        openPartialLayer($("#prodtableDiv"));
        $("#categorySearch").attr("disabled", true);

        setCommentRank(title, categoryId, type);
        $("#ocategoryId").val(categoryId);
        $("#ptags").val($("#tags").val());
        changeChart3Title(title, $("#tags").val());
        setProductRank($("#currentPage").val(), $("#pageSize").val(), categoryId, type, $("#tags").val(), 1);

        $("#categorySearch").attr("disabled", false);
    }

    // 2. 榜单
    function setCommentRank(title, categoryId, type) {

        var data = {};
        data[$("#_csrf").attr("name")] = $("#_csrf").val();
        data["sentiment"] = type;
        data["categoryId"] = categoryId;
        var catetime = $("#catetime").val();
        if(null != catetime && "" != catetime) {
            data["chooseTime"] = catetime;
        } else {
            data["chooseTime"] = $("#config-demo2").val();
        }
        data["overviewDay"] = $("#overviewDay").val();
        var tag = "";
        $.ajax({
            url: "${rc.contextPath}/category/getCategoryRankChart",
            data: data,
            type: "POST",
            dataType: "json",
            async: false,
            success: function (data) {
                changeChart2Title(title, type);
                var dataLength = data.rankChart.length;
                var chartLength = 0;
                if(dataLength > 5) {
                    chartLength = dataLength * 50;
                } else {
                    chartLength = dataLength * 60;
                }
                if (data != "" && data != null && dataLength > 0) {
                    $("#wordsrankingDiv").show();
                    tag = data.rankChart[0].tags;
                    var exportForm={
                    	'headers':['评论','数量'],
                    	'cols':['tags','num']
                    };
                    var chart = horizontalHistogramModal(data.rankChart, "wordsranking", "tags", "num", chartLength,"",exportForm);

                    chart.on('plotclick', function (ev) {
                        var data = ev.data;
                        if (data) {
                            $("#prodtableDiv").show();
                            $("#wordsranking").css("cursor", "pointer");
                            openPartialLayer($("#prodtableDiv"));
                            $("#categorySearch").attr("disabled", true);
                            var name2 = $("#keyWordName2").html();
                            var title = name2.substring(0, name2.length - 3);
                            var comment = data._origin['tags'];
                            $("#tags").val(comment);
                            $("#ptags").val(comment);
                            changeChart3Title(title, comment);
                            // 产品排行
                            setProductRank($("#currentPage").val(), $("#pageSize").val(), categoryId, type, comment, 1);
                            $("#categorySearch").attr("disabled", false);
                        }
                    });
                    $("#categoryId").val(categoryId);
                    $("#sentiment").val(type);
                    $("#tags").val(tag);

                    $("#pcategoryId").val(categoryId);
                    $("#psentiment").val(type);
                    $("#pcategoryName").val(title);
                } else {
                    $("#wordsrankingDiv").hide();
                }
            },
            error: function (XMLHttpRequest) {
                console.log(XMLHttpRequest);
            }
        });
        return tag;
    }

    // 3.产品排行
    function setProductRank(currentPage, pageSize, categoryId, type, comment, sort) {
        $("#prodtable tbody").empty();

        var data = {};
        data[$("#_csrf").attr("name")] = $("#_csrf").val();
        data["sentiment"] = type;
        data["categoryId"] = categoryId;
        var catetime = $("#catetime").val();
        if(null != catetime && "" != catetime) {
            data["chooseTime"] = catetime;
        } else {
            data["chooseTime"] = $("#config-demo2").val();
        }
        data["tags"] = comment;
        data["currentPage"] = currentPage;
        data["pageSize"] = pageSize;
        data["sortType"] = sort;
        data["overviewDay"] = $("#overviewDay").val();

        $.ajax({
            url: "${rc.contextPath}/category/getCategoryProductRank",
            data: data,
            type: "POST",
            dataType: "json",
            success: function (data) {
                if (data.pages > 1) {
                    $(".ui-jqgrid").show();
                    $("#pageTotal").val(data.pages);
                    $("#currentPage").val(data.pageNum);
                    $("#page_num").val(data.pageNum);
                    if(data.isLastPage) {
                        $("#last_grid-pager").addClass("ui-state-disabled");
                        $("#next_grid-pager").addClass("ui-state-disabled");
                    } else {
                        $("#last_grid-pager").removeClass("ui-state-disabled");
                        $("#next_grid-pager").removeClass("ui-state-disabled");
                    }

                    if(data.isFirstPage) {
                        $("#first_grid-pager").addClass("ui-state-disabled");
                        $("#prev_grid-pager").addClass("ui-state-disabled");
                    } else {
                        $("#first_grid-pager").removeClass("ui-state-disabled");
                        $("#prev_grid-pager").removeClass("ui-state-disabled");
                    }

                    $("#sp_1_grid-pager")[0].innerText = data.pages;
                    $("#view_start_row")[0].innerText = data.startRow;
                    $("#view_end_row")[0].innerText = data.endRow;
                    $("#view_page_total")[0].innerText = data.total;
                } else {
                    $(".ui-jqgrid").hide();
                }

                var html = "";
                if (data != "" && data != null) {
                    $("#prodtableDiv").show();
                    $.each(data.list, function (index, item) {
                        html += "<tr><td width=\"76%\">" + item.productName + "</td><td width=\"8%\">" + item.tagsCount + "</td>" +
                                "<td width=\"16%\"><div class=\"ui-pg-div\"><a href=\"javascript:void(0)\" onclick=\"getProdDetail('"
                              + item.productId + "','" + item.productName + "')\">" +
                            "<i class=\"ace-icon fa fa-hand-o-right\"></i></a></div></td></tr>";
                    });

                } else {
                    html = '<tr><td colspan="3"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>';
                    $(".ui-jqgrid").hide();
                }
                $("#prodtable tbody").html(html);
            },
            error: function (XMLHttpRequest) {
                console.log(XMLHttpRequest);
            },
            complete: function() {
                removeLoading($("#prodtableDiv"));
                removeLoading($("#wordsrankingCol"));
                $(".ui-fa-div").css("cursor", "pointer");
                $(".ui-mi-div").css("cursor", "pointer");
                $(".ui-wo-div").css("cursor", "pointer");
            }
        });
    }

    // 翻页
    function showPage(param) {
        var pages = parseInt($("#sp_1_grid-pager")[0].innerText);
        var currentPage = parseInt($("#currentPage").val());
        var pageSize = $("#pageSize").val();
        var flag = 0;
        if ('firstPage' == param) {
            currentPage = 1;
        } else if ('prePage' == param) {
            if (currentPage == 1) {
                currentPage == 1;
                flag = 1;
            } else {
                currentPage = currentPage - 1;
            }
        } else if ('nextPage' == param) {
            if (currentPage == pages) {
                currentPage = pages;
                flag = 1;
            } else {
                currentPage = currentPage + 1;
            }
        } else if ('lastPage' == param) {
            currentPage = pages;
        }
        if (flag == 0) {
            openPartialLayer($("#prodtableDiv"));
            setProductRank(currentPage, pageSize, $("#categoryId").val(), $("#sentiment").val(), $("#tags").val(), "1");
        }
    }

    // 排序
    function changeFlag(obj) {
        openPartialLayer($("#prodtableDiv"));
        var sortName = $(obj).attr("class");
        var pageSize = $("#pageSize").val();

        if (sortName == "sorting" || sortName == "sorting_asc") {
            $("#prodtable th").eq(1).attr("class", "sorting_desc");
            setProductRank(1, pageSize, $("#categoryId").val(), $("#sentiment").val(), $("#tags").val(), "1");
        } else if (sortName == "sorting_desc") {
            $("#prodtable th").eq(1).attr("class", "sorting_asc");
            setProductRank(1, pageSize, $("#categoryId").val(), $("#sentiment").val(), $("#tags").val(), "2");
        }
    }

    function getProdDetail(productId, productName){
        var pcategoryId = $("#pcategoryId").val();
        var psentiment = $("#psentiment").val();
        var ptags = $("#ptags").val();
        var pcategoryName = $("#pcategoryName").val();
        var timeLabel = $("#timeLabel").val();
        var isocategory = $("#isocategory").val();
        var ocategoryId = $("#ocategoryId").val();

        var url = "${rc.contextPath}/productComment/detail?productId=" + productId +
                "&productName=" + productName + "&pcategoryId=" + pcategoryId + "&psentiment=" + psentiment +
                "&ptags=" + ptags + "&choose_date=" + $("#config-demo2").val() + "&pcategoryName=" +
                pcategoryName + "&timeLabel=" + timeLabel + "&flag=" + 2 + "&overviewDay=" + overviewDays +
                "&ocategoryId=" + ocategoryId + "&isocategory=" + isocategory + "&isbackbtn=" + $("#isbackbtn").val();
        window.location.href = url;
    }

    function showDetail(key_word, obj) {
        $("#detailDiv").hide();
        $("#detailDiv").show();
        $(".pointTabForKey tr").css("background-color", "");
        $(obj).css("background-color", "#d9edf6");
        getKeyDetail(key_word);
    }

    function getKeyDetail(key_word) {
        var choose_date = $("#config-demo2").val();
        $(".keyWordName").html(key_word);
        $(".keyWordSection").html(choose_date);
        var obj = document.getElementsByName('searchSetion'); //返回数组
        var sectionIds = '';
        for (var i = 0; i < obj.length; i++) {
            //如果选中，将value添加到变量sectionIds中
            if (obj[i].checked) sectionIds += obj[i].value + ',';
        }
    }

</script>
</body>
</html>